.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96px;
  display: flex;

  .tab-bar-border {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
  }

  .tab-bar-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: relative;
    .tab-bar-icon {
      width: 52px;
      height: 52px;
      display: none;
      &.show {
        display: block;
      }
    }
    .tab-bar-title {
      font-size: 20px;
      margin-top: 2px;
    }
    .tab-bar-reddot {
      position: absolute;
      right: 50%;
      top: 10px;
      transform: translateX(44px);
      width: 18px;
      height: 18px;
      background-color: #f43530;
      border-radius: 50%;
      z-index: 9;
    }
  }
}

@mixin media-style() {
  .custom-tab-bar {
    padding-bottom: 70px;
  }
}
// 适配iPhone X系列下巴
@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  @include media-style();
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  @include media-style();
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  @include media-style();
}
// 下面代码只为适配iPhone X在微信调试模拟器中为724px
@media screen and (device-width: 375px) and (device-height: 724px) and (-webkit-device-pixel-ratio: 3) {
  @include media-style();
}
